<template>
  <div>
    <el-button @click="dialogVisible = true">打开上传弹窗</el-button>
    <el-dialog
      v-model="dialogVisible"
      title="选择并上传"
      width="30%"
      @close="handleClose"
    >
      <el-form :model="form">
        <el-form-item label="选择选项">
          <el-select v-model="form.option" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件">
          <el-upload
            ref="uploadRef"
            action="#"
            :auto-upload="false"
            :on-change="handleFileChange"
            :file-list="fileList"
          >
            <el-button type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleUpload">确定并上传</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template> 
<script setup lang="ts"> 
import { ref, reactive } from 'vue' 
import { ElMessage, UploadInstance, UploadProps } from 'element-plus' 

const dialogVisible = ref(false) 
const uploadRef = ref<UploadInstance>() 
const fileList = ref<UploadProps['fileList']>([]) 
const options = [ { value: 'option1', label: '选项1' }, { value: 'option2', label: '选项2' }, { value: 'option3', label: '选项3' }, ] 

const form = reactive({ option: '', }) 
const handleClose = () => { form.option = '' 
fileList.value = [] } 
const handleFileChange: UploadProps['onChange'] = (uploadFile) => { fileList.value = [uploadFile] } 
const handleUpload = () => { if (!form.option) { ElMessage.warning('请选择一个选项') 
return } if (fileList.value.length === 0) { ElMessage.warning('请选择要上传的文件') 
return } // 这里模拟上传过程 
ElMessage.info('开始上传...') 
setTimeout(() => { ElMessage.success(`上传成功！选项：${form.option}，文件：${fileList.value[0].name}`) dialogVisible.value = false handleClose() }, 2000) // 实际上传逻辑应该类似这样： 
const formData = new FormData() 
formData.append('option', form.option) 
 formData.append('file', fileList.value[0].raw) 
 axios.post('/your-upload-endpoint', formData).then(response => { 
 ElMessage.success('上传成功') 
 dialogVisible.value = false 
 handleClose() 
 }).catch(error => { 
 ElMessage.error('上传失败') 
 }) } 
</script> 
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>